<template>
  <div class="tab-contorl">
    <div v-for="(item,index) in titles" :key="index" class="item" :class="{active:index == currIndex}" @click="clickMe(index)">
        <span>{{item}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        currIndex:0
    };
  },
  props:{
      titles:{
          type:Array,
          default(){
              return []
          }
      }
  },
  components: {},
  methods: {
      clickMe(index){
          this.currIndex = index;
          this.$emit('tabClick',index)
      }
  }
};
</script>

<style lang='scss' scoped>
@import '@/assets/css/_common.scss';

.tab-contorl{
    display: flex;
    text-align: center;
     line-height: 0.66rem;

    .item{
        flex: 1;
        &.active{
            position: relative;
            color:$zhu_color;

            &:after{
                content: ""; display: block;
                position: absolute; width: 2em; height:2px;
                left: 50%;bottom: 0px;
                transform: translateX(-50%);
                @extend .zhubg_color;
            }
        }
    }
}
</style>